<template>
  <el-dialog
    class="gl_dialog_TitleLine"
    width="520px"
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <el-form
      ref="api_POST_CompetitionScheduleVO"
      :model="api_POST_CompetitionScheduleVO"
      label-width="80px"
      size="mini"
      :rules="api_POST_CompetitionScheduleVO_Rules"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="开始时间" prop="time">
            <el-date-picker
              v-model="api_POST_CompetitionScheduleVO.time"
              type="datetime"
              style="width: 100%;"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择开始时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              v-model="api_POST_CompetitionScheduleVO.endTime"
              type="datetime"
              style="width: 100%;"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择结束时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="事件" prop="name">
            <el-input v-model.trim="api_POST_CompetitionScheduleVO.name" placeholder="请填写事件名称" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地点" prop="location">
            <el-input v-model.trim="api_POST_CompetitionScheduleVO.location" placeholder="请填写地址" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="api_POST_CompetitionScheduleVO.comment" type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请填写备注" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      <el-button size="mini" type="primary" :loading="btnLoading" @click="valid">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { CopyData } from '@/lib';
import { Api_POST_CompetitionScheduleVO } from '@/lib/form/events';
import { Api_POST_CompetitionScheduleVO_Rules } from '@/lib/validate/events';
import {
  api_POST_EventsManagementCompetitionSchedule,
  api_PUT_EventsManagementCompetitionScheduleId
} from '@/extend/api/gameswaggerApi/app';
export default {
  name: 'EditSchedule',
  data() {
    return {
      title: '新增日程信息',
      api_POST_CompetitionScheduleVO: new Api_POST_CompetitionScheduleVO(),
      api_POST_CompetitionScheduleVO_Rules: new Api_POST_CompetitionScheduleVO_Rules(),
      api_POST_CompetitionScheduleDTO: {},
      dialogVisible: false,
      // 日程id
      scheduleId: '',
      // 赛事id
      gameId: '',
      btnLoading: false
    };
  },
  created() {
    this.gameId = this.$route.params.id;
    this.initRules();
  },
  methods: {
    open(row) {
      this.title = '新增日程信息';
      this.api_POST_CompetitionScheduleVO = new Api_POST_CompetitionScheduleVO();
      this.scheduleId = '';
      if (row) {
        this.api_POST_CompetitionScheduleDTO = row;
        this.api_POST_CompetitionScheduleDTO.time = this.api_POST_CompetitionScheduleDTO.time && this.api_POST_CompetitionScheduleDTO.time.replace('T', ' ');
        this.api_POST_CompetitionScheduleDTO.endTime = this.api_POST_CompetitionScheduleDTO.endTime && this.api_POST_CompetitionScheduleDTO.endTime.replace('T', ' ');
        CopyData(this.api_POST_CompetitionScheduleDTO, this.api_POST_CompetitionScheduleVO);
        this.scheduleId = row.id;
        this.title = '编辑日程信息';
        this.dialogVisible = true;
      } else {
        this.dialogVisible = true;
      }
    },
    initRules() {
      const _this = this;
      this.api_POST_CompetitionScheduleVO_Rules.time.push({
        validator(rule, value, callback) {
          const _time = value && new Date(value) || '';
          const _endTime = _this.api_POST_CompetitionScheduleVO.endTime && new Date(_this.api_POST_CompetitionScheduleVO.endTime.replace('T', ' ')) || '';
          if (_time && _endTime && _time > _endTime) {
            callback(new Error('开始时间不能大于结束时间'));
          }
          callback();
        },
        trigger: 'change'
      });
      this.api_POST_CompetitionScheduleVO_Rules.endTime = [{
        validator(rule, value, callback) {
          const _time = _this.api_POST_CompetitionScheduleVO.time && new Date(_this.api_POST_CompetitionScheduleVO.time.replace('T', ' ')) || '';
          const _endTime = value && new Date(value) || '';
          if (_time && _endTime && _time > _endTime) {
            callback(new Error('结束时间不能小于开始时间'));
          }
          callback();
        },
        trigger: 'change'
      }];
    },
    valid() {
      this.$refs.api_POST_CompetitionScheduleVO.validate(valid => {
        if (!valid) return;
        this.api_POST_CompetitionScheduleVO.competitionId = this.gameId;
        if (this.scheduleId) {
          this.editSchedule();
        } else {
          this.addSchedule();
        }
      });
    },
    // 新增赛事日程
    addSchedule() {
      return new Promise((resolve, reject) => {
        this.btnLoading = true;
        api_POST_EventsManagementCompetitionSchedule(this.api_POST_CompetitionScheduleVO).then(res => {
          resolve(res);
          this.$message({ type: 'success', message: '新增赛事日程成功！' });
          this.$emit('refreshPage');
          this.api_POST_CompetitionScheduleVO = new Api_POST_CompetitionScheduleVO();
          this.$refs.api_POST_CompetitionScheduleVO.resetFields();
          this.btnLoading = false;
          this.dialogVisible = false;
        }, error => {
          reject(error);
          this.$message({ type: 'error', message: '新增赛事日程失败！' + error.error.message });
          this.btnLoading = false;
        });
      });
    },
    // 编辑赛事日程
    editSchedule() {
      return new Promise((resolve, reject) => {
        this.btnLoading = true;
        api_PUT_EventsManagementCompetitionScheduleId(this.scheduleId, this.api_POST_CompetitionScheduleVO).then(res => {
          resolve(res);
          this.$message({ type: 'success', message: '编辑赛事日程成功！' });
          this.$emit('refreshPage');
          this.dialogVisible = false;
          this.btnLoading = false;
        }, error => {
          reject(error);
          this.$message({ type: 'error', message: '编辑赛事日程失败！' + error.error.message });
          this.btnLoading = false;
        });
      });
    }
  }
};
</script>
